<!--搜索商品-->
<template>
  <div>
    <div class="container">
      <!--      <div class="common-wrapper">-->
      <!--        <el-select v-model="valueMeta" multiple collapse-tags placeholder="请选择标签">-->
      <!--          <div class="el-input" style="width:90%;margin-left:5%;">-->
      <!--            <input type="text" placeholder="请输入" class="el-input__inner" v-model="dropDownValue" @keyup="dropDownSearch">-->
      <!--          </div>-->
      <!--          <el-option v-for="item in optionsMetaShow" :value="item"></el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
      <!--      <i-input v-model="data.keyword" size="large" class="search" placeholder="输入你想查找的商品" required>-->
      <!--        <Button slot="append" icon="ios-search" @click="search"></Button>-->
      <!--      </i-input>-->
      <el-select v-model="keyword" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod"
        :loading="loading">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <Button slot="append" icon="ios-search" @click="searchTo"></Button>
      <div>
      </div>
    </div>
  </div>
</template>

<script>

import { searchProduct } from '../api/category';
import store from '@/vuex/store';

export default {
  name: 'Search',
  data() {
    return {
      sreachData: '',
      promotionTags: ['买2免1', '领200神券', '199减100', '母婴5折抢', '充100送20'],
      data: {
        keyword: ''
      },
      options: [],
      value: [],
      products: [],
      list: [],
      loading: false,
      productsList: [],
      keyword: ''
    };
  },
  mounted() {
    this.init();
    this.search();
    this.list = this.productsList.map(item => {
      return { value: `${item}`, label: `${item}` };
    });
  },
  watch() {
    this.search();
    this.list = this.productsList.map(item => {
      return { value: `${item}`, label: `${item}` };
    });
  },
  methods: {
    remoteMethod(query) {
      console.log('你在这里吗');
      console.log(query);
      this.data.keyword = query;
      console.log(this.data.keyword);
      this.search();
      this.list = this.productsList.map(item => {
        return { value: `${item}`, label: `${item}` };
      });
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          // this.options = this.list.filter(item => {
          //   return item.label.toLowerCase()
          //     .indexOf(query.toLowerCase()) > -1;
          // });
          query = '';
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    closeTags(index) {
      this.promotionTags.splice(index, 1);
    },
    selectTags(index) {
      this.sreachData = this.promotionTags[index];
    },
    searchTo() {
      searchProduct(this.data).then((res) => {
        this.$store.commit('setProductsText', res.data.data);
      });
      this.$router.push({ path: '/searchResult' });
    },
    init() {
      this.keyword = this.$route.query.keyword;
    },
    // 查询商品
    search() {
      console.log('你一定要好好地！');
      console.log(this.data.keyword);
      console.log('你一定要好好地！');
      console.log(this.data.keyword);
      searchProduct(this.data).then((res) => {
        console.log('你一定要好好地！');
        console.log(res.data.code);
        console.log(this.data.keyword);
        if (res.data.code === '00000') {
          console.log(res.data);
          // 处理类型
          // product获取数据
          console.log(res.data.code);
          this.products = res.data.data;
          console.log(this.products.length);
          console.log(this.products);
          this.dataCount = this.products.length;
          for (let i = 1; i < 6; i++) {
            this.productsList[i] = this.products[i].productName;
          }
          console.log(this.productsList);
        } else {
          this.$Message.error(res.data.code);
        }
      });
    }
  },
  store
};
</script>

<style scoped>
.container {
  padding-top: 15px;
  margin: 0px auto;
  margin-bottom: 15px;
  width: 460px;
}

.search {
  margin: 5px 0px;
}
</style>
